<template>
  <intro-view :usage="usage">
    <div style="padding-top: 20px">
      <h3>【default】 behavior scroll, direction: left, speed 6</h3>
      <ui-marquee-notice style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>

      <h3>behavior scroll, direction: right, speed 6</h3>
      <ui-marquee-notice direction="right" style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>

      <h3>behavior slide, direction: left, speed 9</h3>
      <ui-marquee-notice behavior="slide" speed="9" style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>

      <h3>behavior slide, direction: right, speed 9</h3>
      <ui-marquee-notice behavior="slide" direction="right" speed="9" style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>

      <h3>behavior alternate, direction: left, speed 10</h3>
      <ui-marquee-notice behavior="alternate" speed="10" style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>

      <h3>behavior scroll, direction: up, speed 3</h3>
      <ui-marquee-notice direction="up" speed="3" style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>

      <h3>behavior scroll, direction: down , speed 1</h3>
      <ui-marquee-notice direction="down" speed="1" style="background: #ccc">我爱我的国，我爱我的家</ui-marquee-notice>
    </div>
  </intro-view>
</template>

<script>
  /* eslint-disable */
  import usage from './usage.md'
  export default {
    data () {
      return {
        usage
      }
    }
  }
</script>
